<template>
    <div v-loading="loading" element-loading-text="加载中..." class="homeRoot">
        <div class="HomeView">

            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="grid-content ep-bg-purple">
                        <ScheduleProgress />
                    </div>
                </el-col>
                <el-col :span="8">
                    <div v-loading="MyNowClassLoadiing"  class="grid-content ep-bg-purple">
                        <MyNowClass @LoadingOK="MyNowClassLoadiing = false" />
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue";
import ScheduleProgress from "@/components/ScheduleProgress/ScheduleProgress.vue"
import MyNowClass from "@/components/MyNowClass/MyNowClass.vue";
// 公共方法中转站
let global_Object = getCurrentInstance().appContext.config.globalProperties
global_Object.$BackButton.value = false;   //设置不显示返回图标
let loading = ref(false);
let MyNowClassLoadiing = ref(true);
</script>

<style lang="less" scoped>
.homeRoot {
    height: 100%;
    background: linear-gradient(var(--el-color-primary-Home), transparent);
    .HomeView {
        padding-top: 15%;
        padding-left: 5%;
        padding-right: 5%;

        .el-row {
            &::last-child {
                margin-bottom: 0;
            }

            ;
            margin-bottom: 20px;

            .el-col {
                border-radius: 4px;

                .grid-content {
                    display: flex;
                    justify-items: center;
                    align-items: center;
                    border-radius: 20px;
                    height: 100%;
                    background-color: var(--HomeItemColor);
                }
            }
        }
    }
}

    // 渐变动画
    div {
    animation-duration: 0.3s;
    animation-name: opacity_to;
    }
</style>